<template>
  <el-card v-for="(question, index) in props.questionData" :key="index" class="question-card">
    <div v-if="'exam' === props.previewModel || 'answer' === props.previewModel || 'grading' === props.previewModel"
         class="question-exam">
      <div v-if="question.type === 1">
        <el-tag >单选题: {{question.score}}分</el-tag>
        <el-text class="mx-1 question-title" size="large" > {{question.title}}</el-text>
        <div v-html="question.content" class="question-content"></div>
        <el-radio-group v-model="question.memberAnswer.selected" class="radio-group">
          <el-radio :label="option.options" v-for="option in question.options" :key="option.options">
            {{ option.content }}
          </el-radio>
        </el-radio-group>
      </div>
      <div v-if="question.type === 2">
        <el-checkbox-group v-model="question.memberAnswer.selectedList">
          <el-checkbox :label="option.options" v-for="option in question.options"
                       :key="option.options">
            {{ option.content }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <div v-if="'answer' === props.previewModel || 'grading' === props.previewModel">
      <el-divider/>
      <div>
        <el-tag>难易程度</el-tag>
      </div>
      <div>
        <el-tag>答案</el-tag>
      </div>
      <div>
        <el-tag>解析</el-tag>
      </div>

    </div>

    <div v-if="'grading' === props.previewModel">
      <el-divider/>
      <div>
        <el-tag>结果</el-tag>
      </div>
      <div>

        <el-tag>评分</el-tag>
      </div>
      <div>
        <el-tag>批阅类型</el-tag>
      </div>
    </div>

  </el-card>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import {ElCard, ElRadioGroup, ElRadio, ElCheckboxGroup, ElCheckbox, ElInput} from 'element-plus';
import {CodeQuestionVO} from "@/api/exam/question";

const {t} = useI18n() // 国际化
const message = useMessage() // 消息弹窗
/** 打开弹窗
 * questionShowData 对象
 * model: 展示模式
 *    exam: 答题模式
 *    answer: 背题模式
 *    grading: 阅卷模式
 */
const props = defineProps<{
  questionData: [CodeQuestionVO]
  previewModel: string
}>()

</script>

<style scoped>
.question-component {
  max-width: 600px;
  margin: auto;
}

.question-card {
  margin-bottom: 20px;
}

.question-exam {
  margin-bottom: 20px;
}

.question-title {
  margin-left: 5px;
}

.question-content {
  margin-left: 20px;
  margin-bottom: 15px;
}
</style>
